<template>
  <div>
    <log-header></log-header>
    <div :class="$style.box">
      <el-row style="margin-bottom:30px;">
        <el-col :span="4">
          <el-select v-model="type.value" clearable placeholder="显示类型" @change="getTableData">
            <el-option
              v-for="item in type.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="fenzu.value" clearable placeholder="分组类型" @change="getTableData">
            <el-option
              v-for="item in fenzu.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-date-picker
            v-model="date"
            type="daterange"
            placeholder="选择日期范围" @change="getTableData">
          </el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-select v-model="helper.value" clearable placeholder="服务客服" @change="getTableData">
            <el-option
              v-for="item in helper.options"
              :key="item.id"
              :label="item.UserName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <span>通话时长</span>
          <el-input v-model="callNum1" placeholder="" style="width:50px;"></el-input>
          -
          <el-input v-model="callNum2" placeholder="" style="width:50px;"></el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="getTableData">搜索</el-button>
        </el-col>
      </el-row>
      <el-table
       :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          :label="tit"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            {{scope.row.kf.kfName}}
          </template>
        </el-table-column>
        <el-table-column label="呼入电话">
          <el-table-column
            label="呼入数"
            align="center"
            min-width="50">
          <template slot-scope="scope">
            <span :class="$style.number" v-text="scope.row.xx.zcount_callin"></span>
          </template>
          </el-table-column>
          <el-table-column
            label="呼入数"
            align="center"
            min-width="50">
            <el-table-column
              label="接通"
              align="center"
              min-width="50">
            <template slot-scope="scope">
              <span :class="$style.number" v-text="scope.row.xx.zcount_callin_y"></span>
            </template>
            </el-table-column>
            <el-table-column
              label="未接通"
              align="center"
              min-width="50">
            <template slot-scope="scope">
              <span :class="$style.number" v-text="scope.row.xx.zcount_callin_n"></span>
            </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="呼入总时长"
            align="center"
            min-width="100">
            <template slot-scope="scope">
              {{scope.row.xx.zcount_callin_zsc}}
            </template>
          </el-table-column>
          <el-table-column
            label="平均时长"
            align="center"
            min-width="100">
            <template slot-scope="scope">
              {{scope.row.xx.zcount_callin_zscpj}}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="呼出电话">
          <el-table-column
            label="呼出数"
            align="center"
            min-width="50">
            <template slot-scope="scope">
              <span :class="$style.number" v-text="scope.row.xx.zcount_callout"></span>
            </template>
          </el-table-column>
          <el-table-column
            label="呼出数"
            align="center"
            min-width="50">
            <el-table-column
              label="接通"
              align="center"
              min-width="50">
            <template slot-scope="scope">
              <span :class="$style.number" v-text="scope.row.xx.zcount_callout_y"></span>
            </template>
            </el-table-column>
            <el-table-column
              label="未接通"
              align="center"
              min-width="50">
            <template slot-scope="scope">
              <span :class="$style.number" v-text="scope.row.xx.zcount_callout_n"></span>
            </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="呼出总时长"
            align="center"
            min-width="100">
            <template slot-scope="scope">
              {{scope.row.xx.zcount_callout_zsc}}
            </template>
          </el-table-column>
          <el-table-column
            label="平均时长"
            align="center"
            min-width="100">
            <template slot-scope="scope">
              {{scope.row.xx.zcount_callout_zscpj}}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="全部电话">
          <el-table-column
            label="通话总数"
            align="center"
            min-width="50">
            <template slot-scope="scope">
              <span :class="$style.number" v-text="scope.row.xx.zcount"></span>
            </template>
          </el-table-column>
          <el-table-column
            label="通话总数"
            align="center"
            min-width="50">
            <el-table-column
              label="接通"
              align="center"
              min-width="50">
            <template slot-scope="scope">
              <span :class="$style.number" v-text="scope.row.xx.zcount_y"></span>
            </template>
            </el-table-column>
            <el-table-column
              label="未接通"
              align="center"
              min-width="50">
            <template slot-scope="scope">
              <span :class="$style.number" v-text="scope.row.xx.zcount_n"></span>
            </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="通话总时长"
            align="center"
            min-width="100">
            <template slot-scope="scope">
              {{scope.row.xx.zcount_zsc}}
            </template>
          </el-table-column>
          <el-table-column
            label="平均时长"
            align="center"
            min-width="100">
            <template slot-scope="scope">
              {{scope.row.xx.zcount_zscpj}}
            </template>
          </el-table-column>
          <el-table-column
            label="已接通平均时长"
            align="center"
            min-width="100">
            <template slot-scope="scope">
              {{scope.row.xx.zcount_zscpjyjt}}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="name"
          label="满意度"
          align="center"
          min-width="50">
          <template slot-scope="scope">
            <span :class="$style.click" @click="dialog(scope.$index)">查看</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="dialogTableVisible" title="满意度" size="tiny">
      <div>客服满意度调查（客服XX）
        <el-date-picker
          v-model="dialogDate"
          type="month"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <el-table :data="gridData" border style="margin-top:20px;">
        <el-table-column  label="呼入满意统计" min-width="100" align="center">
          <el-table-column property="callin_0" label="未按键" min-width="100" align="center"></el-table-column>
          <el-table-column property="callin_1" label="非常满意" min-width="100" align="center"></el-table-column>
          <el-table-column property="callin_2" label="基本满意"  min-width="100" align="center"></el-table-column>
          <el-table-column property="callin_3" label="不满意"   min-width="100" align="center"></el-table-column>
          <el-table-column property="callin_44" label="未进行满意度调查"   min-width="100" align="center"></el-table-column>
        </el-table-column>
      </el-table>
      <el-table :data="gridData" border style="margin-top:50px;">
        <el-table-column  label="呼出满意统计" min-width="100" align="center">
          <el-table-column property="callout_0" label="未按键" min-width="100" align="center"></el-table-column>
          <el-table-column property="callout_1" label="非常满意" min-width="100" align="center"></el-table-column>
          <el-table-column property="callout_2" label="基本满意"  min-width="100" align="center"></el-table-column>
          <el-table-column property="callout_3" label="不满意"   min-width="100" align="center"></el-table-column>
          <el-table-column property="callout_44" label="未进行满意度调查"   min-width="100" align="center"></el-table-column>
        </el-table-column>
      </el-table>
      <div slot="footer" >
          <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
          <el-button @click="dialogTableVisible = false">取 消</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import LogHeader from '../../components/header.vue'
import { dateFormat } from 'vux'
export default {
  components: {
    LogHeader
  },
  data() {
    return {
      date:[
        dateFormat(new Date(), 'YYYY-MM-DD'),
        dateFormat(new Date(), 'YYYY-MM-DD')
      ],
      helper:{
        options: [],
        value: ''
      },
      fenzu:{
        options: [{
          label: '业务组',
          value: 104
        },{
          label: '回访组',
          value: 112
        },{
          label: '答疑组',
          value: 100
        }],
        value: ''
      },
      type: {
        options: [{
          label: '按员工汇总',
          value: 1
        },{
          label: '按日期汇总',
          value: 2
        },{
          label: '按座席组汇总',
          value: 3
        }],
        value: 1
      },
      callNum1: '',
      callNum2: '',
      tableData: [{
        kf:{
          adminid:1317,
          zcount:2
        },
        xx:[
          {
            zcount:2,
            zcount_callin:0,
            zcount_callin_n:0,
            zcount_callin_y:0,
            zcount_callin_zsc:"00:00:00",
            zcount_callin_zscpj:"00:00:00",
            zcount_callout:2,
            zcount_callout_n:1,
            zcount_callout_y:1,
            zcount_callout_zsc:"00:01:38",
            zcount_callout_zscpj:"00:00:49",
            zcount_n:1,
            zcount_y:1,
            zcount_zsc:"00:01:38",
            zcount_zscpj:"00:00:49",
            zcount_zscpjyjt:"00:01:38",
          }
        ]
      }],
      gridData: [],
      dialogTableVisible: false,
      dialogDate: dateFormat(new Date(), 'YYYY-MM'),
      adminid: ''
    }
  },
  computed: {
    userInfo () {
      return this.$store.getters.getUserInfo
    },
    kf () {
      return this.$store.getters.getKf
    },
    tit () {
      return this.type.value === 1 ? '客服' : this.type.value === 2 ? '日期' : '组别'
    }
  },
  watch: {
    dialogDate: function (val) {
      if (val != '') {
        this.getSatisfied(this.adminid)
      }
    },
  },
  methods: {
    dialog (index) {
      this.dialogTableVisible = true;
      this.adminid = this.tableData[index].kf.adminid
      this.getSatisfied(this.adminid)
    },
    async getTableData () {
      const { power } = this.userInfo
      let {data} = await this.$get(this,{api:'ajaxapi/callinfoStatistics.do',data: {
          id: this.userInfo.id,
          adminid: this.helper.value,
          type: this.type.value,
          starttime: this.date && dateFormat(this.date[0], 'YYYY-MM-DD'),
          endtime: this.date && dateFormat(this.date[1], 'YYYY-MM-DD'),
          stime: this.callNum1,
          etime: this.callNum2,
          UserName: this.userInfo.userName,
          groupId:this.fenzu.value,
          UserGroupId: this.userInfo.userGroupId,
  
          // isAdmin: this.userInfo.isAdmin,
          power,
        }
      })
      if (data.state === 0) {
        this.tableData = data.content;
      } else {
        this.$toast({
          message: data.message
        })
      }
    },
    async getSatisfied (id) {
      let {data} = await this.$get(this,{api:'ajaxapi/mydtj.do',data: {
          adminid: id,
          mydtime: dateFormat(this.dialogDate, 'YYYY-MM')
        }
      })
      if (data.state === 0) {
        this.gridData = []
        this.gridData.push(data.content);
      } else {
        this.$toast({
          message: data.message
        })
      }
    }
  },
  mounted () {
    this.helper.options = this.kf;
    this.getTableData();
  }
}
</script>
<style lang="scss" module>
 .box {
    background: #fff;
    padding: 20px;
    border: 1px solid #dddfe6;
 }

 .click {
   color: #5394fc;
   text-decoration: underline;
   cursor: pointer;
 }
 .number{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width:100%;
 }
</style>

